<template>
	<view class="" :style="skin">
		<jnavbar :title="'售后详情'"></jnavbar>
		<view class="box page_container" scroll-y>
			<view class="mt"></view>
			<view class="goodinfo pd">
				<view>{{ statelist[detail.state - 1] }}</view>
				<text v-if="detail.state == 3">驳回原因：{{ detail.reject_remake }}</text>
			</view>

			<view class="goodinfo pd" v-for="(item, i) in list" :key="i">
				<view class="uni-flex-row uni-flex-title">
					<vimage class="img_box" :src="item.master" mode=""></vimage>
					<!-- 		<view class="uni-flex-column info_text">
						<text class="u-line-2">{{ item.name }}</text>
						<text class="sm-font">{{ item.pvs_value || '' }}</text>
						<view class="uni-flex-row uni-flex-title">
							<text>￥{{ item.sell_price }}</text>
						</view>
					</view> -->
					<view class="goods_content uni-flex-column">
						<text class="u-main-color u-line-2">{{ item.name }}</text>
						<text class="u-tips-color u-line-1">{{ item.pvs_value || '' }}</text>
						<!-- 	<text>数量:{{ item.count }}</text> -->
					</view>
					<view class="goods_price uni-flex-column">
						<text>￥{{ item.sell_price }}x{{ item.count }}</text>
					</view>
				</view>
				<view v-if="item.attach" v-for="(data, i) in item.attach" class="u-content-color u-flex u-row-between u-font-sm u-margin-top-20">
					<text>{{ data.attach_value }}</text>
					<text>&yen;&nbsp;{{ data.attach_price }}x{{ item.count }}</text>
				</view>
			</view>
			<view class="goodinfo" v-if="detail.express_num || detail.deliver_num">
				<view class="uni-flex-row item"><text>物流信息</text></view>
				<block v-if="detail.express_num">
					<view class="line"></view>
					<view class="uni-flex-row item">
						<view class="left"><text>买</text></view>
						<view class="right uni-flex-title uni-flex-row">
							<view class="uni-flex-column mid-font">
								<text>{{ detail.express_company }}</text>
								<text>{{ detail.express_num }}</text>
							</view>
							<text class="iconfont el-sc-xiangyou"></text>
						</view>
					</view>
				</block>
				<block v-if="detail.deliver_num">
					<view class="line"></view>
					<view class="uni-flex-row item">
						<view class="left"><text class="shop">卖</text></view>
						<view class="right uni-flex-title uni-flex-row">
							<view class="uni-flex-column mid-font">
								<text>{{ detail.deliver_company }}</text>
								<text>{{ detail.deliver_num }}</text>
							</view>
							<text class="iconfont el-sc-xiangyou"></text>
						</view>
					</view>
				</block>
			</view>
			<view class="goodinfo" v-if="detail.state == 12 || detail.state == 14">
				<view class="uni-flex-title uni-flex-row item">
					<text>退货地址</text>
					<text @click="getfillExpress(0)" class="btns uni-background-button sm-font">查看并填写快递信息</text>
				</view>
			</view>
			<view class="goodinfo" v-if="detail.state == 13 || detail.state == 10">
				<view class="uni-flex-title uni-flex-row item">
					<text>退货地址</text>
					<text @click="getfillExpress(1)" class="btns uni-background-button sm-font">查看并修改快递信息</text>
				</view>
			</view>
			<u-popup ref="popup" v-model="showPopupBottom" mode="center" >
				<view class="popup_div">
					<view class="uni-flex-title uni-flex-row item"><text>退货地址</text></view>
					<view class="line"></view>
					<view class="uni-flex-column  item">
						<text>{{ fillExpress.linkman }} {{ fillExpress.phone }}</text>
						<text>{{ fillExpress.address }}</text>
					</view>
				</view>
				<view class="popup_div">
					<view class="uni-flex-title uni-flex-row item">
						<text>快递公司</text>
						<input v-model="express_company" class="sm-font" placeholder="请输入快递公司" />
					</view>
					<view class="line"></view>
					<view class="uni-flex-title uni-flex-row item">
						<text>快递单号</text>
						<input v-model="express_num" placeholder="请输入快递单号" class="sm-font" />
					</view>
					<view @click="submitExpress" class="uni-flex-item"><text class="btns uni-background-button">提交</text></view>
				</view>
			</u-popup>
			<view class="goodinfo">
				<view class="item uni-flex-row uni-flex-title">
					<text>处理方式:</text>
					<text>{{ typelist[detail.type] }}</text>
				</view>
				<view class="item uni-flex-row uni-flex-title" v-if="detail.type != 3">
					<text>退款金额:</text>
					<text>{{ detail.money }}</text>
				</view>
				<view class="item uni-flex-row uni-flex-title">
					<text>退款说明:</text>
					<text>{{ detail.explain }}</text>
				</view>
				<view class="item uni-flex-row uni-flex-title">
					<text>申请时间:</text>
					<text>{{ detail.create_time }}</text>
				</view>
				<view class="item uni-flex-wrap">
					<block v-for="(item, i) in imglist" :key="i"><image :src="item" mode=""></image></block>
				</view>
			</view>
		</view>
		<view class="footer uni-flex-end" v-bind:class="show_empty?'top_50':''">
			<view class="btns" v-if="detail.state == 4"><u-button shape="circle" type="primary" size="mini" @click="confirmGoods">确认收货</u-button></view>
			<view class="btns" v-if="detail.state == 1"><u-button shape="circle" type="primary" size="mini" @click="cancelOrder">取消申请</u-button></view>
			<view class="btns" v-if="detail.state == 3"><u-button shape="circle" type="primary" size="mini" @click="repOrder">重新申请</u-button></view>
		</view>
		<view class="l-gap" v-if="show_empty"></view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			typelist: ['', '仅退款', '退款退货', '换货'],
			imglist: [],
			showPopupBottom: false,
			detail: {},
			fillExpress: {},
			express_num: '',
			express_company: '',
			//底层模态框
			popType: 'center',
			statelist: [
				'等待商家处理',
				'同意申请',
				'驳回申请',
				'商家已发货，等待客户收货',
				'手动退款',
				'确认发货',
				'退款退货完成',
				'退款完成',
				'换货完成',
				'退回物品,等待退款',
				'同意退款',
				'等待买家退回商品',
				'买家退回物品，等待退款',
				'买家退回物品，等待商家重新发货'
			],
			show_empty:false
		};
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},

	async onLoad(e) {
		await this.$getWx;
		// #ifdef MP-WEIXIN
			this.show_empty=util.getShowType()
		// #endif
		this.id = e.id;
		this.getdetail();
	},
	onPullDownRefresh() {
		this.getdetail();
	},
	methods: {
		changePopup() {},
		cancelOrder() {
			let params = {
				id: this.id
			};
			this.$http('/aftersale/cancelOrder', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					// let pages = getCurrentPages();
					// let currPage = pages[pages.length - 2];
					// currPage.getdetail();
					uni.navigateBack({});
				}
			});
		},
		// aftersale/
		confirmGoods() {
			var _this = this;

			uni.showModal({
				title: '是否确认收货',
				success(res) {
					if (res.confirm) {
						let params = {
							id: _this.id
						};
						_this.$http('/aftersale/confirmGoods', params, 'PUT').then(res => {
							if (res.statusCode == 200) {
								_this.getdetail();
								// let pages = getCurrentPages();
								// let currPage = pages[pages.length - 2];
								// currPage.getdetail()
							}
						});
					}
				}
			});
		},
		getfillExpress(type) {
			this.type = type;
			let params = {
				id: this.id
			};
			this.$http('/aftersale/fillExpress', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					this.fillExpress = res.data.msg.after_address_id;
					this.showpup();
				}
			});
		},

		submitExpress() {
			let return_time = util.formatTime(new Date());

			let params = {
				id: this.id,
				express_num: this.express_num,
				express_company: this.express_company
			};
			if (this.type == 0) {
				params.return_time = return_time.daytime + ' ' + return_time.hourtime;
				this.$http('/aftersale/submitExpress', params, 'POST').then(res => {
					if (res.statusCode == 200) {
						this.getdetail();
						this.showPopupBottom=false
					}
				});
			} else if (this.type == 1) {
				this.$http('/aftersale/modifyExpress', params, 'PUT').then(res => {
					if (res.statusCode == 200) {
						this.getdetail();
						this.showPopupBottom=false
					}
				});
			}
		},
		showpup() {
			this.showPopupBottom=true
		},
		getdetail() {
			let params = {
				id: this.id
			};
			this.$http('/aftersale/afterDetails', params, 'GET').then(res => {
				uni.stopPullDownRefresh();
				if (res.statusCode == 200) {
					let detail = res.data.msg;
					this.detail = detail;
					this.list = res.data.msg.oc;
					this.express_num = detail.express_num;
					this.express_company = detail.express_company;
					this.imglist = JSON.parse(res.data.msg.imgs);
				}
			});
		},
		repOrder() {
			var i;
			if (this.list.length > 1) {
				i = 'all';
			} else {
				i = this.list[0].ocid;
			}
			this.Jumpurl(
				{
					link: 'aftersale?id=' + i + '&oid=' + this.detail.order_id,
					type: 1,
					login_type: 2
				},
				'redirect'
			);
		}
	}
};
</script>

<style lang="scss">
.box {
	height: calc(100vh);
}
.goodinfo {
	width: 718rpx;
	background-color: #fff;
	// margin: 0rpx 32rpx;
	padding: 0 20rpx;
	margin-left: 16rpx;
	font-size: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	.img_box {
		width: 140rpx;
		height: 140rpx;
		border-radius: 6rpx;
	}
	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 6rpx;
	}
	.info_text {
		flex: 1;
		font-size: 28rpx;
		justify-content: space-between;
		height: 140rpx;
		padding-left: 20rpx;
		.sm-font {
			color: #888;
			font-size: 24rpx;
		}
	}
	.item {
		padding: 10rpx 0;
		.left {
			flex: 1;
			justify-content: center;
			display: flex;
			text {
				border-radius: 50%;
				background: #67c23a;
				width: 50rpx;
				height: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 50rpx;
			}
			.shop {
				background: #df5000;
			}
		}
		.right {
			flex: 5;

			.uni-flex-column {
				height: 90rpx;
				justify-content: space-between;
			}
		}
		input {
			width: 120rpx;
			text-align: right;
		}
		.btns {
			display: inline-block;
			border-radius: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #fff;
			padding: 0 15rpx;
		}
	}
	.line {
		margin-bottom: 20rpx;
	}
	.evanswitch {
		transform: scale(0.6);
	}
}
.line {
	width: 100%;
	height: 1rpx !important;
	background-color: #f5f5f5;
}
.pd {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.mt {
	height: 20rpx;
}
.footer {
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	font-size: 30rpx;
	.allprice {
		text:first-child {
			font-size: 36rpx;
		}
	}
}
.popup_div {
	width: 690rpx;
	background-color: #fff;
	// margin: 0rpx 32rpx;
	padding: 0 20rpx;
	font-size: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	.item {
		padding: 15rpx 0;
		text-align: left;
		input {
			width: 300rpx;
			text-align: right;
			height: unset;
		}
	}
	.btns {
		width: 100%;
		display: inline-block;
		border-radius: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
	}
}
.goods_content {
	width: 320rpx;
	height: 140rpx;
	justify-content: space-between;
	margin-left: 20rpx;
	text:first-child {
		font-size: 26rpx;
		color: #333333;
	}

	text:last-child {
		font-size: 26rpx;
		color: #999999;
		font-weight: bold;
	}
}

.goods_price {
	flex: 1;
	align-items: flex-end;
	height: 140rpx;
	text:first-child {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
	}
}
</style>
